<template>
  <div class="canvas-wrapper draw-lines">
    <!--用来和鼠标进行交互操作的canvas-->
    <canvas
      class="canvas-dom"
      @mousemove="drawLinesIns.MouseMove"
      @mousedown="drawLinesIns.clickPoint"
      @mouseup="drawLinesIns.stopDragging"
      :width="canvasWidth"
      :height="canvasHeight"
      ref="can"
    ></canvas>
    <!--存储已生成的点线，避免被清空-->
    <canvas
      class="canvasSave-dom"
      :width="canvasWidth"
      :height="canvasHeight"
      ref="canSave"
    ></canvas>
  </div>
</template>
<script setup>
// export const drawTypeEnum = object2Enum({
//     0: "lines",
//     1: "polygons",
// });
import { onUnmounted, ref, watchEffect } from "vue";
import { Lines } from "@/components/drawComp/drawBase";
const can = ref(null);
const canSave = ref(null);
const props = defineProps({
  // 画布尺寸
  canvasWidth: {
    type: [Number, String],
    default: 1000,
  },
  canvasHeight: {
    type: [Number, String],
    default: 600,
  },
  // 底图尺寸
  imageWidth: {
    type: Number,
    default: null,
  },
  imageHeight: {
    type: Number,
    default: null,
  },
  // 底图分辨率尺寸
  naturalWidth: {
    type: Number,
    default: null,
  },
  naturalHeight: {
    type: Number,
    default: null,
  },
  // 线段
  lines: {
    type: Array,
    default: null,
  },
  // 可编辑
  editable: {
    type: Boolean,
    default: false,
  },
  // 保存点数据项是不是对象结构
  pointItemIsObj: {
    type: Boolean,
    default: false,
  },
  // 是否可撤销（没实现
  withdrawAble: {
    type: Boolean,
    default: false,
  },
  // 是否判断当前绘制图形和其他图形重叠了
  judgeIsOverlapping: {
    type: Boolean,
    default: false,
  },
  // 判断点击点的容错距离，越大越容易点到实心点
  faultTolerant: {
    type: Number,
    default: 5,
  },
});
const emits = defineEmits(["pointIsIntersect", "rectIsOverlapping"]);
const drawLinesIns = new Lines(props, {
  emits,
});
watchEffect(() => {
  drawLinesIns.initDom(can.value, canSave.value);
});
onUnmounted(drawLinesIns?.unMountedCb);
defineExpose({
  ClickReset: drawLinesIns.ClickReset,
  ClickPut: drawLinesIns.ClickPut,
  ClickDraw: drawLinesIns.ClickDraw,
  ClickDrawLine: drawLinesIns.ClickDrawLine,
  DeletePrevious: drawLinesIns.DeletePrevious,
  ClickClear: drawLinesIns.ClickClear,
  drawLines: drawLinesIns.drawLines,
  init: drawLinesIns.init,
});
</script>
<style lang="scss" scoped>
.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  > canvas {
    // border: 2px solid transparent;
    display: block;
  }
  .borderRed {
    // border: 2px solid #ff3d3d;
    box-shadow: 0 0 0 2px #ff3d3d inset;
  }
  .canvas-dom {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
  }

  .canvasSave-dom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .img {
    width: 100%;
    height: 100%;
  }
}
</style>
